<template>
    <div class="box">
        <div ref='wrap' class="wrap" :style="{'height': pageHeight + 'px'}">
            <!-- :style="{'width': waveWidth + 'px','height': waveWidth + 'px','opacity': waveOp}" -->
            <div class="wave-wrap">
                <div ref='wave' class="wave"></div>
                <div ref='waveTwo' class="waveTwo"></div>
            </div>
        </div>
    </div>
</template>
<style scoped>
    .wrap {
        width: 750px;
        background-color: aqua;
        align-items: center;
        justify-content: center;
    }
    .wave-wrap {
        width: 200px;
        height: 200px;
        position: relative;
        align-items: center;
        justify-content: center;
    }
    .wave {
        width: 50px;
        height: 50px;
        opacity: 1;
        border-top-right-radius: 25px;
        border-top-left-radius: 25px;
        border-bottom-left-radius: 25px;
        border-bottom-right-radius: 25px;
        background-color: aliceblue;

        /* transition-property: opacity;
        transition-duration: 3000;
        transition-delay: 0;
        transition-timing-function: 'ease'; */
    }

    .waveTwo {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 200px;
        opacity: 0;
        border-top-right-radius: 100px;
        border-top-left-radius: 100px;
        border-bottom-left-radius: 100px;
        border-bottom-right-radius: 100px;
        background-color: aliceblue;
    }
</style>
<script>
import {Utils} from 'weex-ui'
const animation = weex.requireModule('animation');
var i = 0;
var colors = ['#C99833','#9E7A7A','#F9BF45','#24936E','#1E88A8'];
export default {
    data(){
        return{
            pageHeight: 1334,
            waveWidth: 50,
            waveOp: 1
        }
    },
    created() {
        this.pageHeight = Utils.env.getPageHeight();
    },
    mounted() {
        var wrapEl = this.$refs.wrap;
        var waveEl = this.$refs.wave;
        var waveElTwo = this.$refs.waveTwo;
        setTimeout(() => {this.loop(wrapEl,waveEl,waveElTwo)},200)
        // this.$nextTick(
            // this.loop(wrapEl,waveEl)
        // )
    },
    methods:{
        loop(wrapEl,waveEl,waveElTwo){
            this.waves(waveEl);
            this.wavestwo(waveElTwo);
            if (i > 4) {
                i = 0;
                this.wrapColor(wrapEl,colors[i]);
            }else {
                this.wrapColor(wrapEl,colors[i]);
                i++;
            }
            setTimeout(() => {
                this.loop(wrapEl,waveEl,waveElTwo)
            },4000)
        },
        wrapColor(wrapEl,color){
            animation.transition(wrapEl,{
                styles:{
                    backgroundColor: color
                },
                duration: 4000,
                timingFunction: 'ease',
                delay: 0
            })
        },
        waves(waveEl){
            var vm = this;
            animation.transition(waveEl,{
                styles:{
                    opacity: '0',
                    transform: 'scale(4)'
                },
                duration: 2000,
                timingFunction: 'ease',
                delay: 0
            },function(){
                animation.transition(waveEl,{
                    styles:{
                        opacity: '1',
                        transform: 'scale(1)'
                    },
                    duration: 1500,
                    timingFunction: 'ease',
                    delay: 0
                })
            })
        },
        wavestwo(waveEl){
            var vm = this;
            animation.transition(waveEl,{
                styles:{
                    opacity: '1',
                    transform: 'scale(0.25)'
                },
                duration: 2000,
                timingFunction: 'ease',
                delay: 0
            },function(){
                animation.transition(waveEl,{
                    styles:{
                        opacity: '0',
                        transform: 'scale(1)'
                    },
                    duration: 1500,
                    timingFunction: 'ease',
                    delay: 0
                })
            })
        }
    }
}
</script>
